<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="80px" :label-position="top" :rules="rules">
      <h2>提交一个任务</h2>
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="任务名称" prop="title">
            <el-input v-model="form.title" placeholder="请输入任务名称"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="categoryId" label-width="400px">
            <el-select v-model="form.categoryId" placeholder="请选择类型">
              <!-- 使用 v-for 遍历选项列表 -->
              <el-option
                v-for="category in typeList"
                :key="category.id"
                :label="category.name"
                :value="category.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="任务简介" prop="summary">
        <el-input v-model="form.summary" placeholder="请输入任务简介"/>
      </el-form-item>

      <el-form-item>
        <span style="color: red">*</span>
        <span> 所需技能</span>
        <br>
        <el-tag
          :key="tag"
          v-for="tag in dynamicTags"
          closable
          :disable-transitions="false"
          @close="tagHandleClose(tag)">
          {{tag}}
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput">添加技能</el-button>
      </el-form-item>


      <el-row :gutter="20">
        <el-col :span="12">
            <el-form-item  label="您的预算" prop="minimumBudget">
              <div class="budget">
                <el-input-number  v-model="form.minimumBudget" :min="0" :max="form.maximumBudget" placeholder="请输入最低预算" />
                -
                <el-input-number v-model="form.maximumBudget" :min="form.minimumBudget"  placeholder="请输入最高预算"/>
              </div>
            </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="预计完成时间" prop="transactionTime">
            <el-date-picker clearable
                            v-model="form.transactionTime"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="选择日期"
                            :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="任务描述" prop="description">
        <el-input type="textarea" :rows="4" v-model="form.description" placeholder="请输入任务描述"/>
      </el-form-item>
            <el-form-item label="所需文档" prop="docSrc">
              <file-upload v-model="form.docSrc"/>
            </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dialogVisible = true">确 定</el-button>

      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
        <span>确认提交</span>
        <span slot="footer" class="dialog-footer">
         <el-button @click="dialogVisible = false">取 消</el-button>
         <el-button type="primary" @click="submitForm">确 定</el-button>
       </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import {addTask} from "@/api/system/task";
import {listType} from "@/api/system/type";

export default {
  name: "Task",
  dicts: ['order_status'],
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          // 获取当前日期
          const today = new Date();
          // 将时分秒设为0，只比较日期部分
          today.setHours(0, 0, 0, 0);
          // 如果选择的日期小于当前日期，则禁用
          return time.getTime() <= today.getTime();
        }
      },
      dynamicTags: [],
      inputVisible: false,
      inputValue: '',
      top: 'top',
      typeList: [],
      dialogVisible: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        title: [
          {required: true, message: "任务名称不能为空", trigger: "blur"}
        ],
        categoryId:[
          {required: true, message: "请选择类型", trigger: "change"}
        ],
        summary:[
          {required: true, message: "任务简介不能为空", trigger: "blur"}
        ],
        skill:[
          {required: true, message: "请输入所需技能", trigger: "blur"}
        ],
        minimumBudget:[
          {required: true, message: "请输入完整的预算", trigger: "blur"}
        ],
        maximumBudget:[
          {required: true, message: "请输入最高预算", trigger: "blur"}
        ],
        transactionTime:[
          {required: true, message: "请选择预计完成时间", trigger: "change"}
        ],
        description:[
          {required: true, message: "请输入任务描述", trigger: "blur"}
        ],
        docSrc:[
          {required: true, message: "请上传文档", trigger: "change"}
        ]
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    tagHandleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      alert(inputVisible)
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        let isDuplicate = false;
        this.dynamicTags.forEach(tag => {
          // 在这里对数组中的每个元素进行操作
          if(tag==inputValue){
            isDuplicate = true;
            return
          }
        });
        if(isDuplicate){
          alert("已输入过该技能")
          return
        }
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    /** 查询类型列表 */
    getList() {
      this.loading = true;
      listType(this.queryParams).then(response => {
        this.typeList = response.rows;
      });
    },
    handleClose(done) {
      done();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        title: null,
        categoryId: null,
        summary: null,
        minimumBudget: null,
        maximumBudget: null,
        skill: null,
        description: null,
        status: null,
        employeeId: null,
        docSrc: null,
        releaseTime: null,
        transactionTime: null,
        transactionPrice: null,
        expectedPrice: null,
        employerId: null
      };
      this.resetForm("form");
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if(this.dynamicTags.length==0){
            alert("请输入至少一个技能")
            return
          }
          this.form.skill = this.dynamicTags.join(',')
          if (this.form.id != null) {
            updateTask(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
              this.dialogVisible = false;
            });
          } else {
            addTask(this.form).then(response => {
              this.$modal.msgSuccess("发布成功");
              this.open = false;
              this.getList();
              this.dialogVisible = false;
              location.reload()
            });
          }
        }
      });
    },
  }
};
</script>
<style scoped>
.budget {
  display: flex;
  gap: 10px;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
